<template>
	<!-- 登录 -->
	<div>
		<van-nav-bar title="登录" right-text="注册" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
		<div class="nav">

			<h1><img src="../assets/logo.jpg" alt=""></h1>
			<van-cell-group>
				<van-field v-model="username" class="iconfont icon-shouji phone" center placeholder="+86  请输入手机号" />
				<van-field v-model="password" type="password" class="iconfont icon-mima phone" center placeholder="请输入密码" /><span
				 class="iconfont icon-biyan"></span>
				<van-button round type="info" @click="login" class="login">登录</van-button>
				<p class="lianjie"><span @click="mess">短信验证码登录</span><span @click="wang">忘记密码</span></p>
			</van-cell-group>
			<div class="bottom">
				<p>使用其他方式登录</p>
				<div class="con"><img src="../assets/weixin.png" alt=""></div>
				<h2>五色糖-成就美好女人<br>
					<p>ROSILOLLY.TO BE A ROSY LADY</p>
				</h2>
			</div>
		</div>
	</div>
</template>

<script>
	import * as api from '../api/getProlist'
	export default {
		name: 'login',
		data() {
			return {
				username: '',
				password: '',
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			onClickRight() {
				this.$router.push('/register')
			},
			mess() {
				this.$router.push('/messlogin')
			},
			wang() {
				this.$router.push('/loginpassword')
			},
			login() {
				this.$store.commit('login', this.username)
				this.$store.commit('reg', this.password)
				if (this.$store.state.usernames == '') {
					this.$toast('手机号不能为空')
				} else if (/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/.test(this.$store.state.usernames) != true) {
					this.$toast('手机号格式不正确')
				} else if (this.$store.state.passwords == '') {
					this.$toast('密码不能为空')
				} else {
					api.getLogin({
						userName: this.$store.state.usernames,
						password: this.$store.state.passwords,
					}).then((data) => {
						console.log(data)
						if (data.data.code == 'success') {
							localStorage.setItem('username', this.$store.state.usernames)
							localStorage.setItem('password', this.$store.state.passwords)
							localStorage.setItem('token', data.data.token)
							this.$toast('登录成功')
							this.$router.push("/home")
						} else {
							console.log(data.data.message);
							// this.$router.push("/register")
							this.$toast('用户名或密码错误')
							location.reload()
						}
					})
				}
			}
		},
	}
</script>

<style scoped="">
	body {
		display: flex;
		flex-direction: column;
	}

	.van-nav-bar__title {
		color: #fff;
		font-size: 14px;
	}

	.van-nav-bar {
		height: 46px;
		background: #d46170;
	}

	.van-field__control::placeholder {
		color: #c5c9ca;
	}

	.van-icon,
	.van-icon::before {
		color: #FFF;
		font-size: 12px;
	}

	.van-nav-bar__text {
		color: #fff;
		font-size: #12px;
	}

	.icon-shouji:before,
	.icon-mima:before {
		font-size: 20px;
		color: #b85261;
		margin-right: 13px;
	}

	.icon-biyan:first-of-type {
		position: absolute;
		top: 60px;
		right: 30px;
		color: #8d9194;
	}

	h1 {
		width: 170px;
		height: 52px;
		margin: 30px auto 40px;
	}

	h1 img {
		width: 100%;
		height: 100%;
	}

	.nav {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.nav .phone {
		background: #eff3f4;
		font-size: 12px;
		width: 276px;
		height: 36px;
		margin: 0 auto;
		margin-bottom: 14px;
		border-radius: 18px;
	}

	.nav .login {
		width: 276px;
		height: 36px;
		background: #d46170;
		border: 0;
		display: block;
		margin-bottom: 26px;
		position: relative;
	}

	.nav .lianjie {
		width: 256px;
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		text-align: right;
		margin: 0 auto;
		margin-bottom: 38px;
	}

	.nav .lianjie span {
		color: #d46170;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-content: center;
		text-align: center;
	}

	.bottom p {
		font-size: 12px;
	}

	.bottom h2 {
		font-size: 18px;
		color: #d95e68;
	}

	.bottom h2 p {
		font-size: 7px;
		color: #d37785;
	}


	.bottom .con {
		width: 33px;
		height: 33px;
		border-radius: 50%;
		border: 1px solid #7bc549;
		margin: 0 auto;
		overflow: hidden;
	}

	.con img {
		width: 100%;
		height: 100%;
		margin: -2px 0 4px 1px;
	}
</style>
